// 组件数据懒加载
// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserver (apiFn) {
  // 监听的目标对象
  const target = ref(null)
  // stop 是一个可执行的方法 调用就会停止监听
  // 不管元素进入还是离开视口区域都不会再执行回调函数
  // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 布尔值 代表当前监听的元素是否进入视口区域
      console.log(isIntersecting)
      // ...判断  一旦为true 就发送ajax
      if (isIntersecting) {
        // // 关闭监控是否进入视口
        // stop()
        // 发起网络请求
        apiFn()
        // 关闭监控是否进入视口
        stop()
      }
    },
    {
      // 阈值：0-1
      // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
      threshold: 0
    }
  )
  return {
    target
  }
}
